<template>
  <div>
    <div id="main" style="width: 100%;height:890px;">

    </div>
  </div>

</template>

<script>
  import axios from 'axios'
  export default {
    name: "About",
    data(){
      return {

      }
    },
    mounted:function () {
      window.myChart=this.$echarts.init(document.getElementById('main'))
      axios.post('/api/els/search/salary', [
        {
          "name":"address",
          "value":"软件园二期",
          "must":true
        },
          {
            "name":"name",
            "value":"java",
            "must":true
          }
        ]
      )
        .then(
          response=>{
            var myChart=window.myChart;
            // this.hostportList.splice(0,this.hostportList.length,...response.data);
            var myData = [];
            var databeast = {
              10: []
            };
            var databeauty = {
              10: []
            };

            for(var i=0;i<response.data.length;i++){
              databeast[10].push(response.data[i].lowSalary);
              databeauty[10].push((response.data[i].highSalary+'').slice(0,5));
              myData.push(response.data[i].company);
            }

            var option = {
              baseOption: {
                backgroundColor: '#000',
                timeline: {
                  show: true,
                  axisType: 'category',
                  tooltip: {
                    show: true,
                    formatter: function(params) {
                      console.log(params);
                      return params.name + '月份数据统计';
                    }
                  },
                  autoPlay: true,
                  currentIndex: 6,
                  playInterval: 1000,
                  label: {
                    normal: {
                      show: true,
                      interval: 'auto',
                      formatter: '{value}月',
                    },
                  },
                  data: [],
                },
                title: {
                  textStyle: {
                    color: '#fff',
                    fontSize: 16,
                  },
                  subtext: '作者:月夜归醉',
                },
                legend: {
                  data: ['最低薪资', '最高薪资'],
                  top: 4,
                  right: '20%',
                  textStyle: {
                    color: '#fff',
                  },
                },
                tooltip: {
                  show: true,
                  trigger: 'axis',
                  formatter: '{b}<br/>{a}: {c}元',
                  axisPointer: {
                    type: 'shadow',
                  }
                },

                toolbox:{
                  right:20,
                  feature:{
                    saveAsImage: {},
                    restore: {},
                    dataView: {},
                    dataZoom: {},
                    magicType: {
                      type:['line','bar']
                    },
                    // brush: {},
                  }
                },

                grid: [{
                  show: false,
                  left: '4%',
                  top: 60,
                  bottom: 60,
                  containLabel: true,
                  width: '30%',
                }, {
                  show: false,
                  left: '50.5%',
                  top: 80,
                  bottom: 60,
                  width: '40%',
                }, {
                  show: false,
                  right: '4%',
                  top: 60,
                  bottom: 60,
                  containLabel: true,
                  width: '30%',
                }, ],

                xAxis: [
                  {
                    type: 'value',
                    inverse: true,
                    axisLine: {
                      show: false,
                    },
                    axisTick: {
                      show: false,
                    },
                    position: 'top',
                    axisLabel: {
                      show: true,
                      textStyle: {
                        color: '#B2B2B2',
                        fontSize: 12,
                      },
                    },
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: '#1F2022',
                        width: 1,
                        type: 'solid',
                      },
                    },
                  }, {
                    gridIndex: 1,
                    show: false,
                  }, {
                    gridIndex: 2,
                    type: 'value',
                    axisLine: {
                      show: false,
                    },
                    axisTick: {
                      show: false,
                    },
                    position: 'top',
                    axisLabel: {
                      show: true,
                      textStyle: {
                        color: '#B2B2B2',
                        fontSize: 12,
                      },
                    },
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: '#1F2022',
                        width: 1,
                        type: 'solid',
                      },
                    },
                  }, ],
                yAxis: [{
                  type: 'category',
                  inverse: true,
                  position: 'right',
                  axisLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    show: false,
                    margin: 8,
                    textStyle: {
                      color: '#9D9EA0',
                      fontSize: 12,
                    },

                  },
                  data: myData,
                }, {
                  gridIndex: 1,
                  type: 'category',
                  inverse: true,
                  position: 'left',
                  axisLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#9D9EA0',
                      fontSize: 12,
                    },

                  },
                  data: myData.map(function(value) {
                    return {
                      value: value,
                      textStyle: {
                        align: 'center',
                      }
                    }
                  }),
                }, {
                  gridIndex: 2,
                  type: 'category',
                  inverse: true,
                  position: 'left',
                  axisLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    show: false,
                    textStyle: {
                      color: '#9D9EA0',
                      fontSize: 12,
                    },

                  },
                  data: myData,
                }, ],
                series: [],

              },

              options: [],


            }



            option.baseOption.timeline.data.push(10);
            option.options.push({
              title: {
                text: '厦门人才网 10月' + 'Java开发招聘薪资排行统计',
              },
              series: [{
                name: '最低薪资',
                type: 'bar',
                barGap: 20,
                barWidth: 20,
                label: {
                  normal: {
                    show: false,
                  },
                  emphasis: {
                    show: true,
                    position: 'left',
                    offset: [0, 0],
                    textStyle: {
                      color: '#fff',
                      fontSize: 14,
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: '#993300',
                  },
                  emphasis: {
                    color: '#08C7AE',
                  },
                },
                data: databeast[10],
              },


                {
                  name: '最高薪资',
                  type: 'bar',
                  barGap: 20,
                  barWidth: 20,
                  xAxisIndex: 2,
                  yAxisIndex: 2,
                  label: {
                    normal: {
                      show: false,
                    },
                    emphasis: {
                      show: true,
                      position: 'right',
                      offset: [0, 0],
                      textStyle: {
                        color: '#fff',
                        fontSize: 14,
                      },
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: '#659F83',
                    },
                    emphasis: {
                      color: '#F94646',
                    },
                  },
                  data: databeauty[10],
                }
              ]
            });


            myChart.setOption(option)

          }
        ).catch(function(){
        console.log("error")
      })
    }
  }
</script>
<style scoped>

</style>
